<!-- 电表详情 -->
<template>
    <div class="rightNewContent" :style="{left: dir == 'left' ? '260px' : '0px'}">
        <div class="back" @click="back"><img src="../../assets/images/monitor/back.png" /> <label>返回</label></div>
        <div class="main">
            <div class="analysis">
                <div class="aEcharts">
                    <navigation-bar customTitle="用电量分析" style="margin-left: -10px"> </navigation-bar>
                    <!-- <div class="mb10">用电量分析</div> -->
                    <div class="mb10">
                        <DatePicker
                            v-if="currentEcharts != 'hour'"
                            :type="getDateType()"
                            placeholder="请选择"
                            :value="dateValue"
                            @on-change="changeDate"
                            style="width: 150px; margin-right: 10px"
                        ></DatePicker>

                        <DatePicker
                            v-if="currentEcharts == 'hour'"
                            :value="currentHour"
                            format="yyyy-MM-dd"
                            type="daterange"
                            placement="bottom-end"
                            placeholder="Select date"
                            style="width: 210px; margin-right: 10px"
                            disabled
                        ></DatePicker>
                        <el-button-group>
                            <el-button :type="currentEcharts == 'hour' ? 'primary' : 'default'" size="mini" @click="echartBtnClick('hour')"
                                >72小时</el-button
                            >
                            <el-button
                                :type="currentEcharts == 'today' ? 'primary' : 'default'"
                                size="mini"
                                @click="echartBtnClick('today')"
                                >当日</el-button
                            >
                            <el-button
                                :type="currentEcharts == 'month' ? 'primary' : 'default'"
                                size="mini"
                                @click="echartBtnClick('month')"
                                >当月</el-button
                            >
                            <el-button :type="currentEcharts == 'year' ? 'primary' : 'default'" size="mini" @click="echartBtnClick('year')"
                                >当年</el-button
                            >
                        </el-button-group>
                    </div>
                    <div class="bgF5" style="height: 240px; overflow: hidden">
                        <HourEcharts :dir="dir" v-if="currentEcharts == 'hour'" :deviceInfo="deviceInfo"></HourEcharts>
                        <MonthEcharts :dir="dir" v-if="currentEcharts == 'month'" :deviceInfo="deviceInfo"></MonthEcharts>
                        <TodayEcharts :dir="dir" v-if="currentEcharts == 'today'" :deviceInfo="deviceInfo"></TodayEcharts>
                        <YearEcharts :dir="dir" v-if="currentEcharts == 'year'" :deviceInfo="deviceInfo"></YearEcharts>
                    </div>
                </div>
                <div class="aTable" v-if="deviceInfo.eq_type == 'KT'">
                    <kongtiao
                        :ktInfo="ktInfo"
                        :deviceInfo="deviceInfo"
                        @close="closeKt"
                        @refresh="refreshKt"
                        @mode="modeChange"
                        :ktMode="ktModeValue"
                        :windSpeed="windSpeed"
                    ></kongtiao>
                </div>
                <div class="aTable" v-else-if="deviceInfo.eq_type == 'LDKZQ'">
                    <zhaoming></zhaoming>
                </div>
                <div class="aTable" v-else>
                    <chazuo></chazuo>
                </div>
            </div>
            <div class="deviceInfo">
                <navigation-bar customTitle="设备详情"> </navigation-bar>

                <div class="userInfo" v-if="deviceInfo.eq_type == 'KT'">
                    <div class="userContent">
                        <div class="userItem">
                            <label>所属产品：</label>
                            <span>{{ eqDetails.factory_id ? eqDetails.factory_id : '--' }}</span>
                        </div>
                        <div class="userItem">
                            <label>产品型号：</label>
                            <span>{{ eqDetails.eq_model ? eqDetails.eq_model : '--' }}</span>
                        </div>
                        <div class="userItem">
                            <label>产品编号：</label>
                            <span>{{ eqDetails.eq_address ? eqDetails.eq_address : '--' }}</span>
                        </div>
                        <div class="userItem">
                            <label>所属部门：</label>
                            <span>{{ eqDetails.dep_name ? eqDetails.dep_name : '--' }}</span>
                        </div>
                        <div class="userItem">
                            <label>安装地址：</label>
                            <span>{{ eqDetails.install_address ? eqDetails.install_address : '--' }}</span>
                        </div>
                        <div class="userItem">
                            <label>安装时间：</label>
                            <span>{{ eqDetails.install_time ? eqDetails.install_time : '--' }}</span>
                        </div>
                    </div>
                </div>
                <div class="userInfo" v-else-if="deviceInfo.eq_type == 'LDKZQ'">
                    <div class="userContent">
                        <div class="userItem">
                            <label>所属产品：</label>
                            <span>路灯回路控制器</span>
                        </div>
                        <div class="userItem">
                            <label>设备名称：</label>
                            <span>4G智慧物联节能控制器(单相)</span>
                        </div>
                        <div class="userItem">
                            <label>经纬度：</label>
                            <span>E110.451106 N29.151842</span>
                        </div>
                        <div class="userItem">
                            <label>安装时间：</label>
                            <span>2023-05-16 13:16</span>
                        </div>
                        <div class="userItem">
                            <label>安装地址：</label>
                            <span>荷园路</span>
                        </div>
                        <div class="userItem">
                            <label>运行时长：</label>
                            <span>181天18小时</span>
                        </div>
                    </div>
                </div>
                <div class="userInfo" v-else>
                    <div class="userContent">
                        <div class="userItem">
                            <label>所属产品：</label>
                            <span>回路控制器</span>
                        </div>
                        <div class="userItem">
                            <label>设备名称：</label>
                            <span>4G智慧物联节能控制器(双回路)</span>
                        </div>
                        <div class="userItem">
                            <label>责任人：</label>
                            <span>李科</span>
                        </div>
                        <div class="userItem">
                            <label>安装时间：</label>
                            <span>2023-05-16 13:16</span>
                        </div>
                        <div class="userItem">
                            <label>安装地址：</label>
                            <span>荷园-101</span>
                        </div>
                        <div class="userItem">
                            <label>运行时长：</label>
                            <span>181天18小时</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="deviceInfo">
                <navigation-bar customTitle="设备详情"> </navigation-bar>
                <el-table :data="tableData" style="width: 100%" size="small" border>
                    <el-table-column prop="type" label="设备类型" width="180"> </el-table-column>
                    <el-table-column prop="no" label="设备序号" width="180"> </el-table-column>
                    <el-table-column prop="number" label="实时读数"> </el-table-column>
                    <el-table-column prop="td" label="网关通道"> </el-table-column>
                    <el-table-column prop="xh" label="网关信号">
                        <template slot-scope="scope">
                            <img :src="getWgxhImg(scope.row.xh)" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="运行状态">
                        <template slot-scope="scope">
                            <label :class="getStatusClass(scope.row.status)"></label>
                        </template>
                    </el-table-column>
                </el-table>
            </div> -->
            <div class="inInfo">
                <div v-if="deviceInfo.eq_type == 'KT'">
                    <kongtiaoControl
                        :ktInfo="ktInfo"
                        :deviceInfo="deviceInfo"
                        :ktClose="ktClose"
                        :ktMode="ktMode"
                        @speed="getSpeed"
                        @modeChange="modeChangeTk"
                    ></kongtiaoControl>
                </div>
                <div v-else-if="deviceInfo.eq_type == 'LDKZQ'">
                    <navigation-bar customTitle="控制面板" style="margin-left: -10px"> </navigation-bar>
                    <zhaomingControl></zhaomingControl>
                </div>
                <div v-else>
                    <navigation-bar customTitle="控制面板" style="margin-left: -10px"> </navigation-bar>
                    <chazuoControl></chazuoControl>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import navigationBar from '@/components/customComponents/managementCenter/navigationBarCustomTitleMargin'
import {moniterBottomTable, moniterTable} from '@/mockData/monitorCenter.js'
import chazuo from './components/threeDevice/chazuo.vue'
import kongtiao from './components/threeDevice/kongtiao'
import zhaoming from './components/threeDevice/zhaoming.vue'
import HourEcharts from '@/view/managementCenter/echarts/electricityMeterEcharts/hourEcharts'
import MonthEcharts from '@/view/managementCenter/echarts/electricityMeterEcharts/monthEcharts.vue'
import TodayEcharts from '@/view/managementCenter/echarts/electricityMeterEcharts/todayEcharts.vue'
import YearEcharts from '@/view/managementCenter/echarts/electricityMeterEcharts/yearEcharts.vue'
import kongtiaoControl from './components/threeDevice/kongtiaoControl'
import zhaomingControl from './components/threeDevice/zhaomingControl.vue'
import chazuoControl from './components/threeDevice/chazuoControl.vue'
import {Utility} from '@/libs/utility'
import moment from 'moment'
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '../../libs/popupCommon'
export default {
    name: 'electricityMeter',
    props: ['dir', 'deviceInfo'],
    components: {
        HourEcharts,
        MonthEcharts,
        TodayEcharts,
        YearEcharts,
        navigationBar,
        kongtiao,
        zhaoming,
        chazuo,
        kongtiaoControl,
        zhaomingControl,
        chazuoControl
    },
    watch: {
        deviceInfo: {
            handler(newV) {
                if (newV) {
                    this.getTempData()
                }
            },
            immediate: true
        }
    },
    data() {
        return {
            /** 点击进来的位置，1为从监控右侧点击进来，2为左侧建筑树的设备点击进来的 */
            inType: 1,
            windSpeed: 0,
            ktMode: {},
            ktModeValue: 0,
            currentHour: [moment().add(-2, 'd').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
            dateValue: Utility.getCurrentTime(),
            bottomTableData: moniterBottomTable,
            tableData: moniterTable,
            /** echarts的类型，hour,today,month,year*/
            currentEcharts: 'month',
            options: [
                {
                    value: '1',
                    label: '电能'
                },
                {
                    value: '2',
                    label: '电能1'
                }
            ],
            value: '1',
            optionsCommon: [
                {
                    value: '1',
                    label: '参数1'
                },
                {
                    value: '2',
                    label: '参数2'
                }
            ],
            valueCommon: '1',
            /**
             * com_time 最新计算时间
             * lately_time最近采集时间
             * eq_type设备类型（01电表 02 水表 根据类型切换单位如kW.h）
             * status 数据状态（0正常1异常）
             * eq_name表计名称
             * eq_address表地址
             * stat_cycle采集周期
             * install_address安装地址
             * switch_state 合闸状态（0合闸1分闸）
             * rate 倍率
             * eq_model 设备型号
             * RATE_WRITE_TAG倍率是否写入（0否1 是）
             * protocol_type协议编号
             * factory_id品牌厂家
             * gateway_name网关名称及编号
             * cycle_time采集时间
             * current_value 当前用量
             * sylx 用能分项
             *
             */
            /** 空调信息 */
            ktInfo: {},
            /** 设备信息 */
            eqDetails: {},
            /** 空调开关机  :true 关机 false 开机 */
            ktClose: true
        }
    },
    computed: {},
    created() {
        // this.getTempData()
    },
    methods: {
        async getTempData() {
            const deviceInfo = this.deviceInfo
            if (typeof deviceInfo?.eq_type == 'undefined') {
                this.deviceInfo.eq_type = this.deviceInfo.sub_type1
            }
            this.getData()
        },

        getSpeed(d) {
            this.windSpeed = d
        },
        modeChangeTk(d) {
            this.ktModeValue = d
        },
        modeChange(d) {
            this.ktMode = d
        },
        changeDate(d) {
            console.log(d)
        },
        /** 空调开关机  :true 关机 false 开机 */
        closeKt(isTrue) {
            this.ktClose = isTrue
        },
        async getData() {
            const deviceInfo = this.deviceInfo
            const id = deviceInfo?.id ? deviceInfo?.id : deviceInfo?.eq_guid

            if (deviceInfo?.eq_guid) {
                this.inType = 1
            } else {
                this.inType = 2
            }
            // 获取设备详情
            const data = await AjaxCommon(`/api/Eq/GetEQDetails?eq_guid=${id}`, 'get', null)
            this.eqDetails = data.data.Message?.[0] ?? {}
            await this.getKtData()
        },
        getValue(str) {
            if (str?.indexOf('|') != -1) {
                const data = str.split('|')
                const params = {
                    总用电量: data[0],
                    信号强度: data[1],
                    电流Ia: data[2],
                    电压Va: data[3],
                    功率Pa: data[4],
                    开关机: data[5],
                    设定模式: data[6],
                    环境温度: data[7],
                    设定温度: data[8],
                    设定风速: data[9],
                    空调风向: data[10],
                    控制模式: data[11],
                    季节模式: data[12],
                    空调插头状态: data[13],
                    允许空调开机: data[14],
                    温度使能状态: data[15],
                    设备时间: data[16],
                    /** 调温 人感  温度  时间  手动 计量 断电 机房省电 定时*/
                    工作状态: data[17],
                    /** 1 有故障  断电  过流  通讯模块故障 红外模块故障 状态检测故障 时间参数错误 温度参数错误 人感参数错误 待机功耗异常 实时时钟故障 温度检测故障 空调脱机运行 存储参数错误 预存电量用完 存储电量错误 存储校表错误*/
                    故障状态: data[18]
                }
                this.ktInfo = params
            }
            //             air.ARR.总用电量 + "|" + air.ARR.信号强度 + "|" + air.ARR.电流Ia + "|" + air.ARR.电压Va + "|" + air.ARR.功率Pa +
            //   "|" + air.ARR.开关机 + "|" + air.ARR.设定模式 + "|" + air.ARR.环境温度 + "|" + air.ARR.设定温度 + "|" + air.ARR.设定风速 +
            // "|" + air.ARR.空调风向 + "|" + air.ARR.控制模式 + "|" + air.ARR.季节模式 + "|" + air.ARR.空调插头状态 + "|" + air.ARR.允许空调开机 + "|"
            // + air.ARR.温度使能状态 + "|" + air.ARR.设备时间+ "|" + (air.ARR.工作状态字.调温 ? 0 : 1) + (air.ARR.工作状态字.人感 ? 0 : 1) +
            // (air.ARR.工作状态字.温度 ? 0 : 1)+ (air.ARR.工作状态字.时间 ? 0 : 1) + (air.ARR.工作状态字.手动 ? 0 : 1) +
            // (air.ARR.工作状态字.计量 ? 0 : 1) + (air.ARR.工作状态字.断电 ? 0 : 1) + (air.ARR.工作状态字.机房省电 ? 0 : 1) +
            //  (air.ARR.工作状态字.定时 ? 0 : 1)
            // + "|" + (air.ARR.故障状态字.断电 ? 0 : 1) + (air.ARR.故障状态字.过流 ? 0 : 1) + (air.ARR.故障状态字.通讯模块故障 ? 0 : 1)+
            //  (air.ARR.故障状态字.红外模块故障 ? 0 : 1) + (air.ARR.故障状态字.状态检测故障 ? 0 : 1) + (air.ARR.故障状态字.时间参数错误 ? 0 : 1)
            // + (air.ARR.故障状态字.温度参数错误 ? 0 : 1) + (air.ARR.故障状态字.人感参数错误 ? 0 : 1) + (air.ARR.故障状态字.待机功耗异常 ? 0 : 1)+
            //  (air.ARR.故障状态字.实时时钟故障 ? 0 : 1) + (air.ARR.故障状态字.温度检测故障 ? 0 : 1) + (air.ARR.故障状态字.空调脱机运行 ? 0 : 1)
            //   + (air.ARR.故障状态字.存储参数错误 ? 0 : 1) + (air.ARR.故障状态字.预存电量用完 ? 0 : 1) + (air.ARR.故障状态字.存储电量错误 ? 0 : 1) +
            //  (air.ARR.故障状态字.存储校表错误 ? 0 : 1);

            // "12.692|19|0.004|234|1|0|0|20|0|0|0|0|0|0|2|1|20251023020823|111111011|1111111111111111"
        },
        async getDeviceStatus(params) {
            return await AjaxCommon(params, 'post', {})
        },
        refreshKt() {
            this.getKtData()
        },
        async getKtData() {
            this.$emit('showSpin', true)
            // 获取设备基本信息
            const deviceInfo = this.deviceInfo
            const id = deviceInfo?.id ? deviceInfo?.id : deviceInfo?.eq_guid
            let params = `/api/Eq/GetArcEQInfo?eq_guid=${id}`
            const res = await AjaxCommon(params, 'get', null)
            const data = res?.data?.Message?.[0]
            console.log(data, '设备详情...................')
            this.deviceItem = data ?? {}
            this.getValue(this.deviceItem?.CURRENT_VALUE ? this.deviceItem?.CURRENT_VALUE : '0.00')
            // 进入页面先加载数据库中已有数据，再通过调用GetEqRtData（可页面设置定时器调用3次，返回数据即更新用量，无返回变更信号状态为灰色，用量为GetEQRTInfo接口数据）获取实时数据
            params = `/api/Eq/GetEqRtData?eqid=${id}`
            /** 	设备实时用量 返回string 字符 实时电量或水量等数据，多个参数用|分隔 如 返回-1说明终端通迅异常网关正常 返回 ""或null 网关和终端通迅异常 */
            let actData = await this.getDeviceStatus(params)
            let value = ''
            value = actData.data?.Message
            if (value && value != '-1') {
                this.deviceStatus = value
                this.getValue(value)
                this.$emit('showSpin', false)
                return
            }
            setTimeout(async () => {
                actData = await this.getDeviceStatus(params)
                value = actData.data?.Message
                this.deviceStatus = value
                if (value && value != '-1') {
                    this.deviceStatus = value
                    this.getValue(value)
                    this.$emit('showSpin', false)
                    return
                }
                setTimeout(async () => {
                    actData = await this.getDeviceStatus(params)
                    value = actData.data?.Message
                    this.deviceStatus = value
                    this.$emit('showSpin', false)
                    if (actData.data?.Message == '' || actData.data?.Message == null) {
                        PopupCommon.notify('info', '网关和终端通迅异常')
                        return
                    }
                    if (actData.data?.Message == -1) {
                        PopupCommon.notify('info', '终端通迅异常网关正常')
                        return
                    }
                    if (value && value != '-1') {
                        this.getValue(value)
                    }
                }, 5000)
            }, 5000)
        },
        getDateType() {
            if (this.currentEcharts == 'today') {
                return 'date'
            }
            if (this.currentEcharts == 'month') {
                return 'month'
            }
            if (this.currentEcharts == 'year') {
                return 'year'
            }
        },
        back() {
            this.$emit('back', this.inType)
        },
        getWgxhImg(xh) {
            return xh == 1
                ? require('../../assets/images/monitor/info3.png')
                : xh == 2
                ? require('../../assets/images/monitor/info2.png')
                : xh == 3
                ? require('../../assets/images/monitor/info1.png')
                : xh == 4
                ? require('../../assets/images/monitor/info.png')
                : require('../../assets/images/monitor/info4.png')
        },
        getStatusClass(status) {
            return status == 1 ? 'status normal' : 'status unNormal'
        },
        echartBtnClick(btnName) {
            this.dateValue = Utility.getCurrentTime()
            this.currentEcharts = btnName
        }
    }
}
</script>

<style scoped>
.navigationBar {
    margin-bottom: 10px;
}
.main {
    height: calc(100vh - 160px);
    overflow-y: auto;
}
.main::-webkit-scrollbar {
    width: 0px;
}
.main::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 0px;
}
.left {
    background-color: #f5f5f5;
    padding: 10px 15px;
}
.left .p33 {
    width: 33%;
    float: left;
    height: 35px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.left .p66 {
    width: 66%;
    float: left;
    height: 35px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.left .p33 .p33Label,
.left .p66 .p33Label {
    color: #666;
    font-size: 14px;
    min-width: 75px;
    display: inline-block;
    vertical-align: middle;
}
.inputOrSelect {
    width: 120px;
}
.inInfo {
    margin-top: 10px;
}
.inInfo .inInfoMain {
    width: 100%;
    display: flex;
}
.inInfo .inInfoMain .right {
    width: 700px;
    text-align: right;
}
.inInfo .inInfoMain .left {
    flex: 1;
    text-align: left;
    margin-right: 10px;
}

.status {
    width: 5px;
    height: 5px;
    border-radius: 5px;
    display: inline-block;
}
.normal {
    background-color: #00ffa9;
}
.unNormal {
    background-color: #999;
}
.deviceInfo {
    margin-top: 10px;
    clear: both;
}
.userInfo {
    padding: 0 10px;
    /* height: 130px; */
}
.userInfo .userContent {
    font-size: 14px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.userInfo .userContent .userItem {
    width: calc((100% - 30px) / 3);
    line-height: 30px;
}
.userInfo .userContent .userItem label {
    color: #999;
    min-width: 100px;
    display: inline-block;
}
.userInfo .userContent .userItem span {
    font-size: 14px;
}
.rightContent {
    height: calc(100vh - 123px);
    flex: none;
    text-align: left;
    padding-top: 2px;
    position: absolute;
    right: 0;
    left: 260px;
}
.back {
    height: 28px;
    line-height: 28px;
    text-align: left;
    padding-left: 10px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}
.back img {
    float: left;
    display: block;
    cursor: pointer;
    margin-right: 5px;
    margin-top: 4px;
}
.back label {
    cursor: pointer;
}
.analysis {
    display: flex;
    position: relative;
    padding: 10px;
}

.analysis .aEcharts {
    flex: 1;
}

.analysis .aTable {
    width: 460px;
    height: 300px;
    padding: 0;
    border-radius: 4px;
    margin-left: 10px;
    margin-top: 43px;
}
.mb10 {
    margin-bottom: 10px;
    font-size: 16px;
}

.analysis .aTable .aTableHeader {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    display: flex;
}
.analysis .aTable .aTableHeader label {
    font-size: 18px;
    font-weight: bold;
}
.analysis .aTable .aTableHeader span {
    font-size: 12px;
    text-align: right;
    flex: 1;
}
.analysis .aTable .aTableHeader span img {
    margin-left: 10px;
}

.analysis .aTable .aTableMain {
    font-size: 12px;
    background-color: #80c8a7;
    border-radius: 4px;
    padding: 15px;
    height: 90px;
}
.analysis .aTable .aTableMain .aTableItem {
    font-size: 16px;
    height: 35px;
    width: 100%;
}
.analysis .aTable .aTableMain .aTableItem label {
    font-size: 18px;
    background-color: #fff;
    height: 25px;
    display: block;
    float: left;
    width: 20px;
    margin-right: 5px;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    border-radius: 2px;
}
.analysis .aTable .aTableMain .aTableItem span {
    background-color: #333;
    height: 5px;
    display: block;
    float: left;
    width: 5px;
    margin-right: 5px;
    border-radius: 5px;
    margin-top: 15px;
}
.analysis .aTable .aTableMain .aTableItem font {
    font-size: 14px;
    color: #fff;
    margin-top: 10px;
    display: block;
    float: left;
    margin-left: 5px;
}

.analysis .aTable .aTableMain .aTableContent {
    font-size: 12px;
}
.analysis .aTable .aTableMain .aTableContent .aTableContentHalf {
    width: 50%;
    float: left;
    height: 30px;
    line-height: 30px;
    color: #fff;
}
.analysis .aTable .aTableMain .aTableContent .aTableContentHalf label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.analysis .aTable .aTableMain .aTableContent .aTableContentHalf span {
    font-size: 14px;
}

.analysis .aTable .aTableTip {
    margin-top: 15px;
}

.analysis .aTable .aTableTip span {
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    display: inline-block;
    margin-right: 10px;
}

.analysis .aTable .aTableTip span img {
    float: left;
    margin-right: 5px;
}
.analysis .aTable .aTableTip span label {
    font-size: 12px;
}

.bgF5 {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
</style>
